<template>
	<view>
		<mescroll-uni top="30" ref="mescrollRef" @init="mescrollInit" :up="upOption" @down="downCallback"
			@up="upCallback">
			<view class="list-box">
				<view class="list-cont">
					<view class="list-item" v-for="(item, index) in list" :key="index">
						<!-- 新增值班状态标签 -->
						<view class="duty-status" :class="{ 'is-duty': item.isduty }">
							{{ item.isduty ? '今日值班' : '非值班日' }}
						</view>

						<view class="list-item-right">
							<view class="list-item-right-name">{{item.roomName}}</view>
							<view class="list-item-right-desc">{{item.description || '暂无描述'}}</view>
							<view class="list-item-right-time">
								<u-icon name="calendar" size="14" color="#999"></u-icon>
								<text class="time-text">{{formatDate(item.creatorTime)}}</text>
							</view>
							<view class="list-item-right-button">
								<u-button type="warning" size="mini" @click="viewDuty(item)">查看值班</u-button>
								<!-- 新增取消值班按钮，仅在当天值班时显示 -->
								<u-button v-if="item.isduty" type="error" size="mini" @click="cancelDuty(item)">取消值班
								</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>

		<!-- 确认弹窗 -->
		<u-modal ref="uModal" v-model="showConfirmModal" :title="modalTitle" :content="modalContent"
			@confirm="confirmCancel" @cancel="showConfirmModal = false"></u-modal>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					currentPage: 1,
					sidx: '',
					pageSize: 10
				},
				upOption: {
					noMoreSize: 5,
					empty: {
						tip: '~ 暂无值班数据 ~',
						icon: 'https://cdn.uviewui.com/uview/empty/data.png'
					}
				},
				list: [],
				showConfirmModal: false,
				modalTitle: '取消值班',
				modalContent: '确定要取消今日值班吗？',
				currentItem: null, // 当前操作的值班项
				buttonStyle: {
					background: '#d28e29',
					color: 'white',
					fontSize: '18px',
					fontWeight: 'bloder',
					width: '100px'
				},
				weekDays: [{
						label: '周一',
						value: '1'
					},
					{
						label: '周二',
						value: '2'
					},
					{
						label: '周三',
						value: '3'
					},
					{
						label: '周四',
						value: '4'
					},
					{
						label: '周五',
						value: '5'
					},
					{
						label: '周六',
						value: '6'
					}, {
						label: '周日',
						value: '0'
					}
				]
			}
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				this.list = [];
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let params = this.params
				params.currentPage = page.num
				params.pageSize = page.size
				this.$u.api.getDutyList(params).then(res => {
					if (page.num == 1) this.list = [];
					if (res.data && res.data.list) {
						this.list = this.list.concat(res.data.list);
						this.mescroll.endBySize(this.list.length, res.data.pagination.total);
						this.mescroll.optUp.textNoMore = "已全部加载,共" + res.data.pagination.total + "条数据"
					} else {
						this.mescroll.endSuccess(0, false);
					}
				}).catch(err => {
					console.log(err, 'err')
					this.$refs.uToast.show({
						title: err || '加载失败',
						type: 'error',
					})
					this.mescroll.endErr()
				})
			},
			formatDate(timestamp) {
				if (!timestamp) return '暂无时间';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			viewDuty(item) {
				// 跳转到值班详情页
				uni.navigateTo({
					url: `/pages/meeting/duty/Form?id=${item.id}`
				});
			},
			parseWeeks(weeks) {
				// 解析后端返回的weeks字段
				if (!weeks) return [];

				try {
					// 如果是字符串格式的数组，先转成数组
					if (typeof weeks === 'string') {
						weeks = JSON.parse(weeks);
					}

					// 确保是数组并转换为字符串
					if (Array.isArray(weeks)) {
						return weeks.map(day => String(day));
					}

					return [];
				} catch (e) {
					console.error('解析值班周期出错:', e);
					return [];
				}
			},
			// 取消值班
			cancelDuty(item) {
				this.currentItem = item;
				this.showConfirmModal = true;
			},

			// 确认取消值班
			confirmCancel() {
				if (!this.currentItem) return;
				this.$u.api.cancelTodayDuty({id:this.currentItem.id}).then(res => {
					if (res.code === 200) {
						this.$refs.uToast.show({
							title: '已取消值班',
							type: 'success'
						});
						// 刷新列表
						this.mescroll.resetUpScroll();
					} else {
						this.$refs.uToast.show({
							title: res.msg || '取消失败',
							type: 'error'
						});
					}
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.message || '操作失败',
						type: 'error'
					});
				}).finally(() => {
					this.showConfirmModal = false;
			  this.currentItem = null;
				});
			}
		}
	}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.list-box {
  padding: 12px;
}

.list-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  
  // 新增值班状态样式
  .duty-status {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 12px;
    font-size: 12px;
    color: #fff;
    border-radius: 0 10px 0 10px;
    background-color: #909399;
    
    &.is-duty {
      background-color: #19be6b;
    }
  }
}

.list-item:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.list-item-right {
  flex: 1;
  padding: 10px 0;
  
  &-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
  }
  
  &-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.4;
  }
  
  &-time {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 12px;
    margin-bottom: 12px;
    
    .time-text {
      margin-left: 4px;
    }
  }
  
  &-button {
    display: flex;
    gap: 12px;
    margin-top: 5px;
    
    // 按钮样式调整
    :deep(.u-button) {
      margin: 0;
      
      &--warning {
        background-color: #d28e29;
      }
      
      &--error {
        background-color: #ff4d4f;
      }
    }
  }
}

// 空状态样式优化
.mescroll-empty {
  padding: 40px 0;
  
  .empty-icon {
    width: 120px;
    height: 120px;
  }
  
  .empty-tip {
    color: #909399;
    font-size: 14px;
    margin-top: 16px;
  }
}
</style>